<template>
  <div class="search">
    <div class="search_head">
      <div>
        <i class="iconfont">&#xe644;</i>
        <input type="text" placeholder="请输入查找内容" />
      </div>
    </div>
    <div class="search_nav">
      <span>电影/电视剧/综艺</span>
    </div>

    <div>
      <div class="searchold">
        <div class="searchold_head">
          <img src="../assets/qwe.jpg" alt />
        </div>
        <div class="searchold_main">
          <div>
            <span>哈尔的移动城堡</span>
            <strong>8.5</strong>
            <!-- 请求数据时记得加判断 这张图片是否有 -->
          </div>
          <p>观众评:8.6</p>
          <p>喜剧.犯罪.热邪</p>
          <p>2017-09-13</p>
        </div>
      </div>
      <div class="hr"></div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>

.search{
  margin-bottom:0.5rem;
  margin-top:0.88rem;
}

.search .search_head {
  background: rgb(245, 245, 245);
  padding: 0.1rem 0;
}

.search .search_head div {
  margin: 0 var(--space);
  background: white;
  height: 0.28rem;
  line-height: 0.28rem;
}

.search .search_head div i {
  padding-left: 0.1rem;
}

.search .search_head div input {
  border: none;
  outline: none;
}

.search .search_nav {
  color: rgb(153, 153, 153);
  padding: 0.1rem var(--space);
  border-bottom: 1px solid rgb(245, 245, 245);
}

.search .search_nav span {
  font-size: 0.15rem;
  font-weight: bold;
}

.searchold {
  display: flex;
  padding: 0.1rem var(--space);
}

.searchold .searchold_head img {
  height: 0.9rem;
}

.searchold .searchold_main {
  flex: 1;
  padding: 0.08rem;
}

.searchold .searchold_main div span {
  font-size: 0.18rem;
  font-weight: bold;
  width: 1.5rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.searchold .searchold_main div strong {
  float: right;
  color: rgb(229, 72, 71);
}

.searchold .searchold_main p {
  padding: 0.03rem 0;
  box-sizing: border-box;
  color: #666;
}

.searchold .searchold_main p:nth-of-type(2) {
  width: 2rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.searchold .btn {
  display: flex;
  justify-content: center;
  align-items: center;
}
.searchold .btn span {
  background: rgb(229, 72, 71);
  padding: 0.08rem;
  border-radius: 0.05rem;
  color: white;
}

.hr {
  height: 0.01rem;
  background: rgb(247, 247, 247);
  margin: 0 var(--space);
}
</style>